#exchange {
    box-sizing: border-box;
    background-color: #2c3639;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;

    #video {
        position: relative;

        .video {
            position: relative;
            width: 100vw;
            height: 570px;
        }

        #local-user{
            height: 100vh;
        }

        #remote-user {
            position: absolute;
            z-index: 100;
            right: 0;
            top: 0;
            width: 100px;
            height: 100px;
        }
    }



    #box {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        #info {
            text-align: center;
            color: #fff;

            h1 {
                margin: 10px 0;
            }

            #user1 {
                width: 160px;
                height: 160px;
                background-color: rgba(255, 255, 255, .2);
            }

            #user2 {
                width: 120px;
                height: 120px;
                background-color: rgba(255, 255, 255, .4);
            }

            #user1,
            #user2 {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
            }
        }
    }

    #bottom {
        height: 100px;
        position: absolute;
        z-index: 100;
        width: 100%;
        bottom: 0;

        // .rv-button {
        //     width: 50px;
        //     height: 50px;
        //     font-size: 20px;
        // }

        .btn {
            display: flex;
            justify-content: space-around;
        }

    }

}